import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd'
import {exampleData,processData,data1,exampleDataShort,processDataAnother} from './data'
import G6 from '@antv/g6';
console.log(processDataAnother);
const TreeGraphReact = () => {
  const ref = React.useRef(null)
  let graph = null

  useEffect(() => {
    if(!graph) {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      graph = new G6.TreeGraph({
        container:ref.current,
        width:1000,
        height:1000,
        pixelRatio: 2,
        modes: {
          default: [{
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              var data = item.get('model').data;
              data.collapsed = collapsed;
              return true;
            }
        }, 'drag-canvas', 'zoom-canvas']
        },
        defaultNode: {
          size: 16,
          anchorPoints: [[0, 0.5], [1, 0.5]],
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9'
          }
        },
        defaultEdge: {
          shape: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF'
          }
        },
        layout: {
          type: 'mindmap',
          direction: 'H',
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 10;
          },
          getHGap: function getHGap() {
            return 100;
          }
        }
      })

      var centerX = 0;
      graph.node(function(node) {
        // if (node.id === 'Modeling Methods') {
        if (node.id === 'node-44') {
          centerX = node.x;
        }
  
        return {
          size: 26,
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9'
          },
          label: node.id,
          labelCfg: {
            position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left'
          }
        };
      });
  
      graph.data(data1);
      // graph.data(processData);
      // graph.data(processDataAnother);
      // graph.data(exampleData);
      // graph.data(exampleDataShort);
      graph.render();
      graph.fitView();
    }
    
  }, [])


  return (
    <div ref={ref}>
    </div>
  );
}

export default TreeGraphReact